<!-- 个人中心页面 -->
<template>
  <div class="Me">
    <!-- 头部导航栏 -->
    <van-nav-bar title="个人中心">
      <template #right v-if="islogin"> 欢迎：{{ nickname }} </template>
    </van-nav-bar>
    <div v-if="!islogin">
      <van-empty class="custom-image" :image='notLogin' description="还未登录哦~">
        <van-button round type="danger" class="bottom-button" to="/login">登录</van-button>
      </van-empty>  
    </div>
    <div v-else>
      <div class="avatar">
        <van-image width="100px" height="100px" :src="avatar"/>
      </div>
      <!-- 宫格 -->
      <van-grid class="grid" :border="false">
        <van-grid-item icon="star-o" text="收藏" :badge="num" to="/favorites" v-if="num"/>
        <van-grid-item icon="star-o" text="收藏" to="/favorites" v-else/>
        <van-grid-item icon="chat-o" text="客服" dot to="/customerService"/>
        <van-grid-item icon="shopping-cart-o" text="购物车" :badge="cart" to="/myCart" v-if="cart"/>
        <van-grid-item icon="shopping-cart-o" text="购物车" to="/myCart" v-else/>
        <van-grid-item icon="pending-payment" :text="`零钱¥${money}`" to="/wallet"/>
      </van-grid>
      <!-- 个人信息 -->
      <div class="author">
        <van-cell title="用户名" :value="username" />
        <van-cell title="昵称" :value="nickname" />
        <van-cell title="手机号码" :value="phone" />
      </div>

      <div class="quit">
        <van-button type="primary" block color="linear-gradient(to right, #ff6034, #ee0a24)" @click="quit">退出用户</van-button>
      </div>
    </div>
    <!-- 底部选项卡 -->
    <xrzp-FootTabbar></xrzp-FootTabbar>
  </div>
</template>

<script>
import image from '@/assets/image';
import { mapState } from "vuex";
export default {
  data(){
    return{
      notLogin:image.notLogin,
    }
  },
  // 借助mapState生成计算属性，从state中读取数据
  computed: {
    ...mapState(["islogin", "nickname", "avatar", "username", "phone","myCart","favorite","remainingSum"]),
    cart(){
      let sum = 0;
      this.myCart.forEach(item=>{
        sum += item.count ;      
      })
      return sum;
    },
    num(){
      return this.favorite.length;
    },
    money(){
      return this.remainingSum.toFixed(2);
    }
  },
  methods: {
    quit() {
      // 清空vuex的登陆信息
      this.$store.commit("loninOK", ["", "", "", ""]);
      this.$router.push("/login");
    },
  },
};
</script>

<style lang="scss" scoped>
.Me {
  .van-nav-bar {
    background-color: $base-color;
    ::v-deep .van-nav-bar__title{
      font-weight: bold;
    }
  }
  ::v-deep .van-nav-bar__right{
    color: #fff;
    font-weight: bold;
  }
  .custom-image{
    ::v-deep .van-empty__image {
      width: 240px;
      height: 240px;
    }
  }
  .van-button--normal{
    font-weight: bold;
  }
  .avatar {
    display: flex;
    justify-content: center;
    margin-top: 20px;
  }
  .grid{
    margin: 20px 0;
    color: #1989fa;
  }
  .quit {
    padding: 10px;
  }
  .bottom-button {
    width: 160px;
    height: 40px;
  }
}
</style>
